<template>
    <div class="admin-content">

        <div class="am-cf am-padding">
            <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">栏目管理</strong> /
                <small>Article Categories Manage</small>
            </div>
        </div>


        <div class="am-g">
            <div class="am-u-sm-12 am-u-md-6">
                <div class="am-btn-toolbar">
                    <div class="am-btn-group am-btn-group-xs">
                        <a type="button" class="am-btn am-btn-default" v-link="{ name: 'category_create'}">
                            <span class="am-icon-plus"></span> 新增
                        </a>
                    </div>
                </div>
            </div>

            <div class="am-u-sm-12 am-u-md-3">
                <form action="/xCms/article/search" method="get">
                    <div class="am-input-group am-input-group-sm">
                        <input type="text" class="am-form-field" v-model="keyword">
                    </div>
                </form>
            </div>

        </div>

        <div class="am-g">
            <div class="am-u-sm-12">


                <form class="am-form">
                    <table class="am-table am-table-striped am-table-hover table-main">
                        <thead>
                        <tr>
                            <th class="table-id">编号</th>
                            <th>缩略图</th>
                            <th class="table-name">分类名</th>
                            <th class="table-is-show am-hide-sm-only">是否显示</th>
                            <th class="table-sort-order am-hide-sm-only" style="width:10%">排序</th>
                            <th class="table-set">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="category in categories | filterBy keyword | orderBy 'sort_order' ">
                            <td>{{category.id}}</td>
                            <td>
                                <img :src="category.thumb" alt="" class="thumb">
                            </td>
                            <td>
                                <span style="padding:4px 12px;" contenteditable="true" @blur="reName($event, $index)">{{category.name}}</span>
                            </td>


                            <td class="am-hide-sm-only">
                            </td>

                            <td class="am-hide-sm-only">
                                <span style="padding:4px 12px;" contenteditable="true" @blur="reSort($event, $index)">{{category.sort_order}}</span>
                            </td>

                            <td>
                                <div class="am-btn-toolbar">
                                    <div class="am-btn-group am-btn-group-xs">
                                        <a class="am-btn am-btn-default am-btn-xs am-text-secondary" v-link="{ name: 'category_edit', params: { categoryId: category.id }}">
                                            <span class="am-icon-pencil-square-o"></span> 编辑
                                        </a>

                                        <a class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only"
                                           @click.prevent="destroy(category)">
                                            <span class="am-icon-trash-o"></span> 删除
                                        </a>

                                        <a class="am-btn am-btn-default am-btn-xs am-text-secondary">
                                            <span class="am-icon-pencil-square-o"></span> 课程编辑
                                        </a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>


                </form>
            </div>

        </div>
    </div>

</template>


<style>

</style>
<script>

    export default{
        ready(){
            this.resource.get().then((response) => {
                console.log(response.json());
                this.$set('categories', response.json())
            });
        },
        data(){
            return {
                resource: this.$parent.categoryResource,
                categories: {},
                keyword: '',
            }
        },
        methods: {
            destroy: function (category) {
                this.resource.delete({id: category.id}).then((response) => {
                    this.categories.$remove(category);
                });
            },
            reSort: function (event, index) {
                var category = this.categories[index];
                var sort_order = event.target.innerText;
                category.sort_order = sort_order;
                this.resource.update({id: category.id}, {sort_order: sort_order});
            },
            reName: function (event, index) {
                var category = this.categories[index];
                var name = event.target.innerText;
                this.resource.update({id: category.id}, {name: name});
            }
        }
    }
</script>
